import { Canvas, Story, Meta } from "@storybook/addon-docs";
import { Select, Stack } from "metabase/ui";

export const dataWithGroupsLarge = [
  { value: "10", label: "Entity key", icon: "label", group: "Overall row" },
  { value: "11", label: "Entity name", icon: "string", group: "Overall row" },
  {
    value: "12",
    label: "Foreign key",
    icon: "connections",
    group: "Overall row",
  },
  { value: "13", label: "Category", icon: "string", group: "Common" },
  {
    value: "14",
    label: "Comment",
    icon: "string",
    group: "Common",
    disabled: true,
  },
  { value: "15", label: "Description", icon: "string", group: "Common" },
  { value: "16", label: "Title", icon: "string", group: "Common" },
  { value: "17", label: "City", icon: "location", group: "Location" },
  { value: "18", label: "Country", icon: "location", group: "Location" },
  { value: "19", label: "Latitude", icon: "location", group: "Location" },
  { value: "20", label: "Longitude", icon: "location", group: "Location" },
  { value: "21", label: "Longitude", icon: "location", group: "Location" },
  { value: "22", label: "State", icon: "location", group: "Location" },
  { value: "23", label: "Zip code", icon: "location", group: "Location" },
];

export const dataWithGroups = dataWithGroupsLarge.slice(0, 6);

export const dataWithIcons = dataWithGroups.map(item => ({
  ...item,
  group: undefined,
}));

export const dataWithLabels = dataWithIcons.map(item => ({
  ...item,
  icon: undefined,
}));

export const args = {
  data: dataWithLabels,
  size: "md",
  label: "Field type",
  description: undefined,
  error: undefined,
  placeholder: "No semantic type",
  searchable: false,
  disabled: false,
  readOnly: false,
  withAsterisk: false,
  dropdownPosition: "flip",
};

export const sampleArgs = {
  value: dataWithLabels[0].value,
  description: "Determines how Metabase displays the field",
  error: "required",
};

export const argTypes = {
  data: {
    control: { type: "json" },
  },
  size: {
    options: ["xs", "md"],
    control: { type: "inline-radio" },
  },
  label: {
    control: { type: "text" },
  },
  description: {
    control: { type: "text" },
  },
  error: {
    control: { type: "text" },
  },
  placeholder: {
    control: { type: "text" },
  },
  searchable: {
    control: { type: "boolean" },
  },
  disabled: {
    control: { type: "boolean" },
  },
  readOnly: {
    control: { type: "boolean" },
  },
  withAsterisk: {
    control: { type: "boolean" },
  },
  dropdownPosition: {
    options: ["bottom", "top", "flip"],
    control: { type: "inline-radio" },
  },
};

<Meta
  title="Inputs/Select"
  component={Select}
  args={args}
  argTypes={argTypes}
/>

# Select

Our themed wrapper around [Mantine Select](https://v6.mantine.dev/core/select/).

## Docs

- [Figma File](https://www.figma.com/file/21uCY0czmCfb6QBjRce0I8/Input-%2F-Select?type=design&node-id=1-96&mode=design&t=Mk8RP6HsneuWzHtr-0)
- [Mantine Select Docs](https://v6.mantine.dev/core/select/)

## Examples

export const DefaultTemplate = args => <Select {...args} />;

export const VariantTemplate = args => (
  <Stack>
    <Select {...args} />
    <Select {...args} variant="unstyled" />
  </Stack>
);

export const Default = DefaultTemplate.bind({});

<Canvas>
  <Story name="Default">{Default}</Story>
</Canvas>

### Size - md

export const EmptyMd = VariantTemplate.bind({});

<Canvas>
  <Story name="Empty, md">{EmptyMd}</Story>
</Canvas>

#### Asterisk

export const AsteriskMd = VariantTemplate.bind({});
AsteriskMd.args = {
  withAsterisk: true,
};

<Canvas>
  <Story name="Asterisk, md">{AsteriskMd}</Story>
</Canvas>

#### Clearable

export const ClearableMd = VariantTemplate.bind({});
ClearableMd.args = {
  defaultValue: sampleArgs.value,
  clearable: true,
  withAsterisk: true,
};

<Canvas>
  <Story name="Clearable, md">{ClearableMd}</Story>
</Canvas>

#### Description

export const DescriptionMd = VariantTemplate.bind({});
DescriptionMd.args = {
  description: sampleArgs.description,
  withAsterisk: true,
};

<Canvas>
  <Story name="Description, md">{DescriptionMd}</Story>
</Canvas>

#### Disabled

export const DisabledMd = VariantTemplate.bind({});
DisabledMd.args = {
  description: sampleArgs.description,
  disabled: true,
  withAsterisk: true,
};

<Canvas>
  <Story name="Disabled, md">{DisabledMd}</Story>
</Canvas>

#### Error

export const ErrorMd = VariantTemplate.bind({});
ErrorMd.args = {
  description: sampleArgs.description,
  error: sampleArgs.error,
  withAsterisk: true,
};

<Canvas>
  <Story name="Error, md">{ErrorMd}</Story>
</Canvas>

#### Read only

export const ReadOnlyMd = VariantTemplate.bind({});
ReadOnlyMd.args = {
  defaultValue: sampleArgs.value,
  description: sampleArgs.description,
  readOnly: true,
  withAsterisk: true,
};

<Canvas>
  <Story name="Read only, md">{ReadOnlyMd}</Story>
</Canvas>

#### Icons

export const IconsMd = VariantTemplate.bind({});
IconsMd.args = {
  data: dataWithIcons,
  description: sampleArgs.description,
  withAsterisk: true,
};

<Canvas>
  <Story name="Icons, md">{IconsMd}</Story>
</Canvas>

#### Groups

export const GroupsMd = VariantTemplate.bind({});
GroupsMd.args = {
  data: dataWithGroups,
  description: sampleArgs.description,
  withAsterisk: true,
};

<Canvas>
  <Story name="Groups, md">{GroupsMd}</Story>
</Canvas>

#### Large sets

export const LargeSetsMd = VariantTemplate.bind({});
LargeSetsMd.args = {
  data: dataWithGroupsLarge,
  description: sampleArgs.description,
  withAsterisk: true,
};

<Canvas>
  <Story name="Large sets, md">{LargeSetsMd}</Story>
</Canvas>

#### Searchable

export const SearchableMd = VariantTemplate.bind({});
SearchableMd.args = {
  data: dataWithGroupsLarge,
  description: sampleArgs.description,
  searchable: true,
  withAsterisk: true,
};

<Canvas>
  <Story name="Searchable, md">{SearchableMd}</Story>
</Canvas>

### Size - xs

export const EmptyXs = VariantTemplate.bind({});
EmptyXs.args = {
  ...EmptyMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Empty, xs">{EmptyXs}</Story>
</Canvas>

#### Asterisk

export const AsteriskXs = VariantTemplate.bind({});
AsteriskXs.args = {
  ...AsteriskMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Asterisk, xs">{AsteriskXs}</Story>
</Canvas>

#### Clearable

export const ClearableXs = VariantTemplate.bind({});
ClearableXs.args = {
  ...ClearableMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Clearable, xs">{ClearableXs}</Story>
</Canvas>

#### Description

export const DescriptionXs = VariantTemplate.bind({});
DescriptionXs.args = {
  ...DescriptionMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Description, xs">{DescriptionXs}</Story>
</Canvas>

#### Disabled

export const DisabledXs = VariantTemplate.bind({});
DisabledXs.args = {
  ...DisabledMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Disabled, xs">{DisabledXs}</Story>
</Canvas>

#### Error

export const ErrorXs = VariantTemplate.bind({});
ErrorXs.args = {
  ...ErrorMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Error, xs">{ErrorXs}</Story>
</Canvas>

#### Read only

export const ReadOnlyXs = VariantTemplate.bind({});
ReadOnlyXs.args = {
  ...ReadOnlyMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Read only, xs">{ReadOnlyXs}</Story>
</Canvas>

#### Icons

export const IconsXs = VariantTemplate.bind({});
IconsXs.args = {
  ...IconsMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Icons, xs">{IconsXs}</Story>
</Canvas>

#### Groups

export const GroupsXs = VariantTemplate.bind({});
GroupsXs.args = {
  ...GroupsMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Groups, xs">{GroupsXs}</Story>
</Canvas>

#### Large sets

export const LargeSetsXs = VariantTemplate.bind({});
LargeSetsXs.args = {
  ...LargeSetsMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Large sets, xs">{LargeSetsXs}</Story>
</Canvas>

#### Searchable

export const SearchableXs = VariantTemplate.bind({});
SearchableXs.args = {
  ...SearchableMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Searchable, xs">{SearchableXs}</Story>
</Canvas>
